<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form>
          <el-form-item label="楼宇名称:">
            <el-input v-model="params.name" type="text" placeholder="请输入楼宇名称" style="width:220px" />
            <el-button type="primary" style="margin:0 20px" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="onSub('add')">添加楼宇</el-button>
      <el-table
        v-loading="loading"
        :data="data"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          prop="id"
          label="序号"
          width="180"
        >
          <template #default="{$index}">
            {{ $index +1+ 10 *(params.page -1) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼宇名称"
          width="180"
        />
        <el-table-column
          prop="floors"
          label="层数"
          width="180"
        />
        <el-table-column
          prop="area"
          label="在管面积(m²)"
        />
        <el-table-column
          prop="propertyFeePrice"
          label="物业费(元/m²)"
        />
        <el-table-column
          prop="status"
          label="	状态"
        />
        <el-table-column
          prop="demoFlag"
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" size="small" @click="onSub('edit' ,row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="onSub('del' ,row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

    </el-card>
    <div class="block" style="float:right">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="10"
        :size-change="params.page"
        layout="total,prev,pager,next,sizes,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>
    <edit-build ref="buRef" :visible.sync="visible" @onSuccess="onLoad" />
  </div>
</template>

<script>
import { getBuildAPI } from '@/api/building'
import EditBuild from './components/edit-build.vue'
export default {
  components: { EditBuild },
  data() {
    return {
      params: {
        page: 1,
        pageSize: null,
        name: ''
      },

      total: 0,
      data: [],
      visible: false,
      list: [],
      loading: false
    }
  },
  created() {
    this.onLoad()
  },
  methods: {

    onSub(type, id) {
      if (type === 'add') {
        // console.log(id)
        // TODO 做新增
        this.visible = true
      }
      if (type === 'edit') {
        // TODO 做编辑
        // 4、ref获取数据
        this.$refs.buRef.onGetDetail(id)
        console.log(id)
        // 提前写入formData.id 防止闪烁
        this.$refs.buRef.formData.id = id
        this.visible = true
      }
      if (type === 'del') {
        // TODO 做删除
        this.$refs.buRef.onDel(id)
      }
    },

    async onLoad() {
      // const res = await getBuildAPI({ page: this.page, pageSize: this.pageSize })
      this.loading = true
      const res = await getBuildAPI(this.params)
      this.loading = false
      this.data = res.data.rows
      this.total = res.data.total
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].status === 0) {
          this.data[i].status = '空置中'
        } else {
          this.data[i].status = '租赁中'
        }
      }
    },
    indexMethod(index) {
      return index + 1
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.onLoad()
      this.params.page = 1
      // 调接口

      // console.log('9898', val)
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.onLoad()
      // 调接口
    }

  }
}
</script>

<style>

</style>
